<template>
    <div style="width: 100%;height: 100%;background: white">
        <div class="quill-editor-view-html" v-if="readOnly" v-html="editorData" ></div>
        <rx-dialog v-else @handOk="handleSubmit" @cancel="cancel">
            <rx-layout>
                <div slot="center">
                    <div  class="editor-container" style="height: 100%;" >
                        <vue-ueditor-wrap
                            v-model="editorData"
                            :config="editorConfig"
                            @ready="ready"
                            class="editbox"
                        >
                        </vue-ueditor-wrap>
                    </div>
                </div>
            </rx-layout>
        </rx-dialog>
    </div>
</template>

<script>


import menuConfig from "@/views/modules/form/core/js/WangEditorUtil.js";
import VueUeditorWrap from 'vue-ueditor-wrap'
import {RxLayout,Dialog,Util,TokenUtil} from "@lowcode/jpaas-common-lib";
import UeditorConfig from "@/assets/js/UeditorConfig";

export default {
    name: "quill-editor-view",
    components: {
        VueUeditorWrap,
        RxLayout,
        Dialog
    },
    props:["readOnly","config","layerid","lydata","destroy"],
    data() {
        return {
            editor: null,
            editorData: '',
            editorConfig: UeditorConfig,
            mode: 'default', // or 'simple'
        }
    },
    created() {
        this.init();
    },
    methods: {
        i18n(name, text, key) {
            return this.$ti18(name, text, "formComponent", key);
        },
        init(){
            this.editorData=this.config?this.config.html:"";
        },
        getMenuConfig(){
            let token=TokenUtil.getToken();
            return menuConfig(token)
        },
        handleSubmit(){
            Util.closeWindow(this,'ok',this.editorData);
        },
        cancel(){
            Util.closeWindow(this,'cancel');
        },
        ready(editor) {
            this.editor = editor
        }
    },
    beforeDestroy() {
        // 调用销毁 API 对当前编辑器实例进行销毁
        const editor = this.editor
        if (editor == null) return
        editor.destroy() // 组件销毁时，及时销毁编辑器
    },
    watch: {
        config: {
            handler: function (o, v) {
                this.init();
            },
            deep: true
        }
    }
}
</script>

<style >



</style>
